<!-- 修改密码 -->
<template>
  <el-dialog v-model="visible" :title="dData.title" @close="beforeClose" class="cu-dialog">
    <el-form class="cu-form" ref="formRef" :model="dData.formData" :rules="rules" label-width="70px">
      <el-form-item label="旧密码" prop="oldPassword">
        <el-input v-model="dData.formData.oldPassword" placeholder="请输入旧密码" type="password"></el-input>
      </el-form-item>
      <el-form-item label="新密码" prop="newPassword">
        <el-input v-model="dData.formData.newPassword" placeholder="请输入新密码" type="password"></el-input>
      </el-form-item>
    </el-form>
    <template #footer>
      <el-button type="primary" @click="submit" :loading="loading">提交</el-button>
    </template>
  </el-dialog>
</template>
<script setup lang="ts">
import { ElMessage, FormInstance, FormRules } from 'element-plus';
import { changePassword } from '@/global/api/user';
import { useUserStore } from '@/store/user';
import { useRouter } from 'vue-router';
const router = useRouter()
const userStore = useUserStore()

const formModal = { oldPassword: '', newPassword: '' } as KeyValue
const rules: FormRules = {
  oldPassword: [{ required: true, message: '请输入旧密码！' }],
  newPassword: [{ required: true, message: '请输入新密码！' }]
}

const visible = ref<boolean>(false)
const dData = reactive({
  title: '', formData: {} as KeyValue
})
const loading = ref<boolean>(false)

// 打开弹窗
const open = () => {
  visible.value = true
  dData.formData = JSON.parse(JSON.stringify(formModal))
  dData.title = '修改密码'
}
// 关闭弹窗
const close = () => {
  visible.value = false
}
// 弹窗关闭前回调
const formRef = ref<FormInstance>()
const beforeClose = () => {
  setTimeout(() => {
    formRef.value?.clearValidate()
    // formRef.value?.resetFields()
  }, 300);
}
// 提交信息
const submit = () => {
  formRef.value?.validate((result: boolean) => {
    if (result) {
      loading.value = true
      let sendData = JSON.parse(JSON.stringify(dData.formData))
      changePassword(sendData).then((res: KeyValue) => {
        if (Number(res.code) === 200) {
          close()
          ElMessage.success({ message: '修改密码成功！' })
          userStore.logout().then(() => {
            router.push(`/login`)
          })
        }
      }).finally(() => {
        loading.value = false
      })
    }
  })
}

defineExpose({ open })
</script>
<style scoped lang="scss">
  .d-image {
    width: 100%; 
    height: 200px;
    > .el-image {
      width: 100%; 
      height: 200px;
    }
    &:hover {
      .delete {
        opacity: 1;
      }
    }
    .delete {
      background-color: rgba($color: #000000, $alpha: .1);
      opacity: 0;
      width: 100%;
      height: 100%;
      position: absolute;
      left: 0;
      top: 0;
      display: flex;
      align-items: center;
      justify-content: center;
      transition: all .3s;
      .delete-icon {
        width: 35px;
        height: 35px;
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        color: red;
        font-size: 18px;
        cursor: pointer;
        transition: all .3s;
        &:hover {
          background-color: #e38f8f;
        }
      }
    }
  }
</style>
<style lang="scss">
  .cu-dialog {
    min-width: 390px;
    max-width: 600px;
  }
  .cu-form {
    .el-cascader, .el-input, .el-select {
      width: 100%;
      .el-input__wrapper {
        width: 100%;
      }
    }
  }
</style>